<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全景 - 测试</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

    <script src="https://threejs.org/build/three.js"></script>

    <style>
        body {
            margin: 0;
        }

        canvas {
            width: 100%;
            height: 100%
        }
    </style>
</head>
<body>

<!--<h1>全景测试</h1>-->

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalCenterTitle">小提琴</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                小提琴（意大利文：Il violino）是一种弦乐器。总共有四根弦。靠弦和弓摩擦发出声音。小提琴琴身（共鸣箱）长约35.5厘米，由具有弧度的面板、背板和侧板粘合而成。
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="window.location.href = 'https://baike.baidu.com/item/%E5%B0%8F%E6%8F%90%E7%90%B4/184482?fr=aladdin'">查看详细</button>
            </div>
        </div>
    </div>
</div>

<script>
    // import * as THREE from "./three.js/build/three";

    // var camera, scene, renderer;

    console.log("panorama init");
    var scene = new THREE.Scene();
    console.log(scene);
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.set(0, 0, 0);
    scene.add(camera);

    // var directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    // scene.add(directionalLight);
    // var ambientLight = new THREE.AmbientLight(0xffffff, 1);
    // scene.add(ambientLight);
    // var pointLight = new THREE.PointLight(0xffffff, 0.8);
    // camera.add(pointLight);
    // scene.add(camera);

    var lights = [];
    lights[0] = new THREE.PointLight(0xffffff, 1, 0);
    lights[1] = new THREE.PointLight(0xffffff, 1, 0);
    lights[2] = new THREE.PointLight(0xffffff, 1, 0);
    lights[3] = new THREE.PointLight(0xffffff, 1, 0);

    lights[0].position.set(0, 200, 0);
    lights[1].position.set(100, 200, 100);
    lights[2].position.set(-100, -200, -100);
    lights[3].position.set(1, 1, -5);

    scene.add(lights[0]);
    scene.add(lights[1]);
    scene.add(lights[2]);
    scene.add(lights[3]);

    // var geometry = new THREE.SphereBufferGeometry(500, 60, 40);
    // // var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
    //
    // var material = new THREE.MeshBasicMaterial({
    //     map: new THREE.TextureLoader().load('panorama.png') //加载一整张纹理图片
    // });
    //
    // var sphere = new THREE.Mesh(geometry, material);
    // scene.add(sphere);

    // var geometry = new THREE.PlaneBufferGeometry(20000, 20000);
    // geometry.scale(-1, 1, 1);
    // var material = new THREE.MeshBasicMaterial({
    //     map: new THREE.TextureLoader().load('panorama.png') //加载一整张纹理图片
    // });
    // var ground = new THREE.Mesh(geometry, material);
    // ground.position.set(0, -250, 0);
    // ground.rotation.x = -Math.PI / 2;
    // scene.add(ground);


    var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1), new THREE.MeshBasicMaterial());//{color: 0xff0000}));
    cube.position.set(0, 0, -5);
    scene.add(cube);

    var jump = new THREE.Mesh(new THREE.CircleGeometry(2, 32), new THREE.MeshBasicMaterial({color: 0xA0A0A0}));
    jump.position.set(15, -5, 0);
    jump.rotation.set(0, -8, 0);
    scene.add(jump);

    var click_info = new THREE.Mesh(new THREE.CircleGeometry(0.5, 32), new THREE.MeshBasicMaterial({color: 0xffffff}));
    click_info.position.set(10, 0, 8);
    click_info.rotation.set(0, -8, 0);
    scene.add(click_info);

    var shpere_geometry = new THREE.SphereGeometry(20, 32, 32, 0, 6.3, 6.3);
    shpere_geometry.scale(-1, 1, 1);
    var shpere_material = new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('panorama_one.jpg')});

    var shpere = new THREE.Mesh(shpere_geometry, shpere_material);
    // shpere.scale.set(1, 1, 1);
    // shpere.position.set(1, 1, -5);
    shpere.scale.set(-1, 1, 1);
    shpere.position.set(0, 0, 0);
    scene.add(shpere);

    var renderer = new THREE.WebGLRenderer();
    console.log("[windows.innerWidth]:" + window.innerWidth + " [window.innerHeight]:" + window.innerHeight);
    renderer.setSize(window.innerWidth - 10, window.innerHeight - 10);
    document.body.appendChild(renderer.domElement);


    var animate = function () {
        requestAnimationFrame(animate);
        // jump.rotation.y += 0.05;
        // console.log("[jump.rotation.y]:" + jump.rotation.y);
        cube.rotation.y += 0.05;
        renderer.render(scene, camera);
    };

    animate();
    mouse_interrupt();
    keyboard_interrupt();

    function mouse_interrupt() {
        var moving = false;
        var startX;
        var startY;
        var endX;
        var endY;
        document.body.onmousedown = function (event) {
            var mouse = new THREE.Vector2();
            mouse.x = (event.clientX / renderer.domElement.clientWidth) * 2 - 1;
            mouse.y = -(event.clientY / renderer.domElement.clientHeight) * 2 + 1;

            var raycaster = new THREE.Raycaster();
            raycaster.setFromCamera(mouse, camera);

            var intersects = raycaster.intersectObject(cube);
            if (intersects.length > 0) {
                console.log("click cube!");
                // change
                shpere_material.map = new THREE.TextureLoader().load('panorama_two.jpg');
            }

            var intersect_info = raycaster.intersectObject(click_info);
            if (intersect_info.length > 0) {
                console.log("click info!");

                $('#exampleModalCenter').modal('show');
            }

            moving = true;
            console.log("mouse down");
            startX = event.clientX;
            startY = event.clientY;
        };
        document.body.onmouseup = function (event) {
            moving = false;
            console.log("mouse up");
        };
        document.body.onmousemove = function (event) {
            // console.log("on mouse move ative...");
            console.log(event.button);
            if (moving == true) {
                endX = event.clientX;
                endY = event.clientY;

                var x = (endX - startX + 0.0) / 360 * 2;
                var y = (endY - startY + 0.0) / 360 * 2;

                console.log("set camera rotation [x]:" + x + " [y]:" + y);
                camera.rotation.set(0, x, 0);
            }
        };
    }

    function keyboard_interrupt() {
        var move_size = 0.05;
        document.onkeypress = function (event) {
            console.log("on [key]:" + event.key + " press");
            if (event.key == 'a') {   // A
                var x = camera.position.x;
                var y = camera.position.y;
                var z = camera.position.z;

                camera.position.set(x + move_size, y, z);
            }
            if (event.key == 'd') { // D
                var x = camera.position.x;
                var y = camera.position.y;
                var z = camera.position.z;

                camera.position.set(x - move_size, y, z);
            }
            if (event.key == 'w') { // W
                var x = camera.position.x;
                var y = camera.position.y;
                var z = camera.position.z;

                camera.position.set(x, y, z + move_size);
            }
            if (event.key == 's') { // S
                var x = camera.position.x;
                var y = camera.position.y;
                var z = camera.position.z;

                camera.position.set(x, y, z - move_size);
            }
            if (event.key == 'q') { // Q
                var x = camera.position.x;
                var y = camera.position.y;
                var z = camera.position.z;

                camera.position.set(x, y + move_size, z);
            }
            if (event.key == 'e') {
                var x = camera.position.x;
                var y = camera.position.y;
                var z = camera.position.z;

                camera.position.set(x, y - move_size, z);
            }
        };
        // document.onkeydown = function (event) {
        //     console.log("on key down");
        // };
        // document.onkeyup = function (event) {
        //     console.log("on key down");
        // };
    }
</script>

</body>
</html>